<template>
  <div class="box kind-box lglk">
    <Header>
      <!-- <router-link to='/home' tag='i' slot='left' class="iconfont icon-jiantou1"></router-link> -->
      外卖速达
    </Header>
    <div class="kind-content">
      <div class="address">
        <span class="iconfont icon-dizhi">
          配送地址
        </span>
        <span class="iconfont icon-jiantou"></span>
      </div>
      <div class="shop-msg">
        <div class="imgbox">
          <img src="http://img.zhichiwangluo.com/zcimgdir/thumb/t_15265267335afcf30d02df1.jpg" alt="">
        </div>
        <div class="shopinfo">
          <p>好好喝的奶茶店</p>
          <p>起送￥20 | 配送费￥5 | 30分钟送达</p>
          <p>店铺地址：南山区</p>
        </div>
      </div>
      <div class="cutline"></div>
      <div class="kind-top">
        <ul>
          <li>
            <p style="border-bottom:2px solid #ff7100">商品</p>
            </li>
          <li>
            <p>评价</p>
          </li>
          <li>
            <p>
              店铺
            </p>
          </li>
          <router-link tag="li" to="/searchRight">
            <p class="search" >
              <span class="iconfont icon-sousuo"></span>
              <span>搜索</span>
            </p>
          </router-link>
        </ul>
      </div>
      <Kindlist :kindlist="kindlist"></Kindlist>
    </div>
  </div>
</template>

<script>
import Kindlist from '@/components/Kind.vue'
import Header from '@/components/header.vue'
export default {
  components: {
    Kindlist,
    Header
  }
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.lglk {
  header {
    @include flexbox();
    @include justify-content(space-between);
  }
  .kind-content {
    .address {
      @include rect(100%,0.35rem);
      line-height: 0.35rem;
      padding: 0 15px;
      font-size: 14px;
      color: #333;
    }
    .shop-msg {
      @include rect(100%,0.76rem);
      @include flexbox();
      padding-bottom: 8px;
      .imgbox {
        @include rect(0.75rem,0.68rem);
        margin: 11px 0 0 10px;
        img {
          @include rect(0.55rem,0.55rem);
        }
      }
      .shopinfo {
        font-size: 12px;
        color: #303445;
        padding-top: 8px;
      }
    }
    .cutline {
      @include rect(100%,0.1rem);
      background-color: #f3f3f3;
    }
    .kind-top {
      ul {
        @include flexbox();
        border-bottom:1px solid #f3f3f3;
        li {
          @include rect(25%,0.37rem);
          text-align: center;
          line-height: 0.37rem;
          p {
            @include rect(0.5rem,0.4rem);
            margin: 0 auto;
          }
          .search {
              border-radius: 20px;
              margin-top:0.05rem;
              @include rect(0.6rem,0.26rem);
              background-color: #f4f4f4;
              line-height: 0.26rem;
              text-align: center;
              font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
